<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 实例 - 边框表格</title>
        <link
            rel="stylesheet"
            href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        />
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <button type="button" class="btn btn-default" id="addBtn">增加</button>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>城市</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>
                        <button type="button" class="btn btn-danger">
                            删除
                        </button>
                        <button type="button" class="btn btn-info">修改</button>
                    </td>
                </tr>
                <tr>
                    <td>Sachin</td>
                    <td>Mumbai</td>
                    <td>
                        <button type="button" class="btn btn-danger">
                            删除
                        </button>
                        <button type="button" class="btn btn-info">修改</button>
                    </td>
                </tr> -->
            </tbody>
        </table>
        <!-- 模态框（Modal） -->
        <div
            class="modal fade"
            id="modifyModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="myModalLabel"
            aria-hidden="true"
        >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-hidden="true"
                        >
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">修改内容</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label
                                    for="inputName"
                                    class="col-sm-2 control-label"
                                    >名称：</label
                                >
                                <div class="col-sm-10">
                                    <input
                                        type="text"
                                        class="form-control"
                                        id="inputName"
                                        placeholder="name"
                                    />
                                </div>
                            </div>
                            <div class="form-group">
                                <label
                                    for="inputCity"
                                    class="col-sm-2 control-label"
                                    >城市：</label
                                >
                                <div class="col-sm-10">
                                    <input
                                        type="text"
                                        class="form-control"
                                        id="inputCity"
                                        placeholder="city"
                                    />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-default"
                            data-dismiss="modal"
                        >
                            关闭
                        </button>
                        <button
                            type="button"
                            class="btn btn-primary"
                            id="submitBtn"
                        >
                            提交更改
                        </button>
                        <button
                            type="button"
                            class="btn btn-primary"
                            id="newlyBuiltBtn"
                        >
                            提交新建
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
        <script>
            const data = [
                { id: 1, name: "李四", city: "重庆" },
                { id: 2, name: "张三", city: "成都" },
            ];
            function renderTbody(data) {
                $(".table>tbody").empty();
                for (let i = 0; i < data.length; i++) {
                    const item = data[i];
                    $(".table>tbody").append(
                        `<tr>
                    <td>${item.name}</td>
                    <td>${item.city}</td>
                    <td>
                        <button type="button" class="btn btn-danger" id="removeBtn" data-id="${item.id}">
                            删除
                        </button>
                        <button type="button" class="btn btn-info" id="reviseBtn" data-id="${item.id}">
                            修改
                        </button>
                    </td>
                </tr>`
                    );
                }
                update();
            }
            renderTbody(data);
            function update() {
                $(".table>tbody>tr>td>#removeBtn").on("click", (e) => {
                    let itemId = $(e.target).attr("data-id");
                    for (let i = 0; i < data.length; i++) {
                        const element = data[i];
                        const id = String(element.id);
                        if (id === itemId) {
                            data.splice(i, 1);
                            renderTbody(data);
                        }
                    }
                });
                $(".table>tbody>tr>td>#reviseBtn").on("click", (e) => {
                    $("#modifyModal .modal-content #myModalLabel").text(
                        "修改内容"
                    );
                    $("#newlyBuiltBtn").hide();
                    $("#submitBtn").show();
                    $("#modifyModal").modal("show");
                    let itemId = $(e.target).attr("data-id");
                    $("#submitBtn").on("click", () => {
                        const name = $("#inputName").val().trim();
                        const city = $("#inputCity").val().trim();
                        for (let i = 0; i < data.length; i++) {
                            const element = data[i];
                            const id = String(element.id);
                            if (id === itemId) {
                                element.name = name;
                                element.city = city;
                                renderTbody(data);
                            }
                        }
                        $("#modifyModal").modal("hide");
                    });
                });
            }
            $("#addBtn").on("click", () => {
                if (data.length === 0) {
                    id = 1;
                } else {
                    id = data[data.length - 1].id + 1;
                }
                $("#modifyModal .modal-content #myModalLabel").text("新增内容");
                $("#inputName").val("");
                $("#inputCity").val("");
                $("#submitBtn").hide();
                $("#newlyBuiltBtn").show();
                $("#modifyModal").modal("show");
                $("#newlyBuiltBtn").on("click", () => {
                    const name = $("#inputName").val().trim();
                    const city = $("#inputCity").val().trim();
                    data.push({ id: id, name: name, city: city });
                    console.log(data);
                    renderTbody(data);
                    $("#modifyModal").modal("hide");
                    return;
                });
            });
        </script>
    </body>
</html>
